<template>
  <div>
    <el-form :model="formItem" label-width="120px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="小组名称：">
            {{ formItem.name }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="组长名称：">
            {{ formItem.groupLeaderName }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="厅局：">
            <div style="padding: 10px 10px 10px 0">
              <el-table
                :show-header="false"
                :data="formItem.institutionsList"
                style="width: 100%;"
              >
                <el-table-column prop="name" label="厅局" />
                <el-table-column prop="residents" label="驻场人员">
                  <template slot-scope="scope">
                    <span>{{ getName(scope.row.residents) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { detail } from '@neu/dcom-ui/api/operationGroup'

export default {
  name: 'OperationGroupViewForm',
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      // 查看的表单内容
      formItem: {
        name: '',
        // 运维组编码
        code: '',
        // 组长名称
        groupLeaderName: '',
        // 组长编码
        groupLeaderCode: null,
        // 关联单位编码
        institutionsList: []
      }
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id > -1) {
        detail(this.id).then(response => {
          this.formItem = {
            ...response.data
          }
        })
      }
    },
    getName(list) {
      return list.map(e => e.name).join('，')
    }
  }
}
</script>
